<template>
  <div class="form-example">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>基础表单</span>
        </div>
      </template>

      <pro-form
        v-model="formData"
        :fields="formFields"
        :rules="formRules"
        @submit="handleSubmit"
        @reset="handleReset"
      >
        <!-- 自定义插槽示例 -->
        <template #custom>
          <el-input v-model="formData.custom" placeholder="自定义输入框">
            <template #append>
              <el-button>搜索</el-button>
            </template>
          </el-input>
        </template>
      </pro-form>
    </el-card>

    <el-card style="margin-top: 20px">
      <template #header>
        <div class="card-header">
          <span>行内表单</span>
        </div>
      </template>

      <pro-form
        v-model="inlineForm"
        :fields="inlineFields"
        :inline="true"
        size="small"
        @submit="handleInlineSubmit"
      >
        <template #buttons>
          <el-button type="primary" @click="handleInlineSubmit">搜索</el-button>
          <el-button @click="handleInlineReset">重置</el-button>
        </template>
      </pro-form>
    </el-card>

    <el-card style="margin-top: 20px">
      <template #header>
        <div class="card-header">
          <span>动态表单</span>
          <el-button type="primary" @click="addField">添加字段</el-button>
        </div>
      </template>

      <pro-form
        v-model="dynamicForm"
        :fields="dynamicFields"
        @submit="handleDynamicSubmit"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { Search, User, Lock } from "@element-plus/icons-vue";
import ProForm from "@/components/ProForm/index.vue";

// 基础表单数据
const formData = reactive({
  username: "",
  password: "",
  type: "",
  date: "",
  status: true,
  tags: [],
  region: [],
  desc: "",
  custom: "",
});

// 基础表单字段配置
const formFields = [
  {
    type: "input",
    label: "用户名",
    prop: "username",
    prefix: "User",
  },
  {
    type: "input",
    label: "密码",
    prop: "password",
    props: { type: "password" },
    prefix: "Lock",
  },
  {
    type: "select",
    label: "类型",
    prop: "type",
    options: [
      { label: "类型一", value: "1" },
      { label: "类型二", value: "2" },
    ],
  },
  {
    type: "date",
    label: "日期",
    prop: "date",
    props: { type: "datetime" },
  },
  {
    type: "switch",
    label: "状态",
    prop: "status",
  },
  {
    type: "checkbox",
    label: "标签",
    prop: "tags",
    options: [
      { label: "标签一", value: "1" },
      { label: "标签二", value: "2" },
      { label: "标签三", value: "3" },
    ],
  },
  {
    type: "cascader",
    label: "地区",
    prop: "region",
    options: [
      {
        value: "guangdong",
        label: "广东省",
        children: [
          {
            value: "guangzhou",
            label: "广州市",
            children: [
              { value: "tianhe", label: "天河区" },
              { value: "haizhu", label: "海珠区" },
            ],
          },
        ],
      },
    ],
  },
  {
    type: "textarea",
    label: "描述",
    prop: "desc",
    props: { rows: 3 },
  },
  {
    type: "slot",
    label: "自定义",
    prop: "custom",
  },
];

// 表单校验规则
const formRules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
  type: [{ required: true, message: "请选择类型", trigger: "change" }],
};

// 行内表单数据
const inlineForm = reactive({
  keyword: "",
  date: "",
  status: "",
});

// 行内表单字段配置
const inlineFields = [
  {
    type: "input",
    label: "关键词",
    prop: "keyword",
    props: { placeholder: "请输入关键词" },
    suffix: "Search",
  },
  {
    type: "date",
    label: "日期",
    prop: "date",
    props: { type: "date", placeholder: "请选择日期" },
  },
  {
    type: "select",
    label: "状态",
    prop: "status",
    options: [
      { label: "启用", value: "1" },
      { label: "禁用", value: "0" },
    ],
  },
];

// 动态表单数据
const dynamicForm = reactive<Record<string, any>>({});
const dynamicFields = ref<any[]>([]);

// 添加字段
const addField = () => {
  const fieldCount = dynamicFields.value.length;
  dynamicFields.value.push({
    type: "input",
    label: `字段${fieldCount + 1}`,
    prop: `field${fieldCount + 1}`,
    rules: [{ required: true, message: "请输入内容", trigger: "blur" }],
  });
};

// 提交处理
const handleSubmit = (values: any) => {
  console.log("基础表单提交:", values);
  ElMessage.success("提交成功");
};

const handleInlineSubmit = () => {
  console.log("行内表单提交:", inlineForm);
  ElMessage.success("搜索成功");
};

const handleDynamicSubmit = (values: any) => {
  console.log("动态表单提交:", values);
  ElMessage.success("提交成功");
};

// 重置处理
const handleReset = () => {
  console.log("基础表单重置");
  ElMessage.info("表单已重置");
};

const handleInlineReset = () => {
  Object.keys(inlineForm).forEach((key) => {
    inlineForm[key] = "";
  });
  ElMessage.info("表单已重置");
};
</script>

<style lang="scss" scoped>
.form-example {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
